<!--  -->
<template>
  <div class="index">
    <!-- 轮播图 -->
    <div class="banner">
      <template>
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in banners" :key="item.imageUrl">
            <el-image :src="item.imageUrl"></el-image>
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>

    <!-- 卡片 -->
    <div class="card">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6" v-for="o in cardList" :key="o.img">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="o.img" class="image" />
            <div class="content" style="padding: 14px">
              <span>{{ o.title }}</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getBanner } from "@/util/home.js";

export default {
  name: "",
  data() {
    return {
      banners: [],
      currentDate: new Date(),
      cardList: [
        { title: "企业荣誉", img: require("@/assets/img/01.jpg") },
        { title: "企业荣誉", img: require("@/assets/img/02.jpg") },
        { title: "企业荣誉", img: require("@/assets/img/03.jpg") },
        { title: "企业荣誉", img: require("@/assets/img/04.jpg") },
        { title: "企业荣誉", img: require("@/assets/img/05.jpg") },
        { title: "企业荣誉", img: require("@/assets/img/06.jpg") },
        { title: "企业荣誉", img: require("@/assets/img/07.jpg") },
      ],
    };
  },
  created() {
    this.getBanner();
  },
  methods: {
    async getBanner() {
      let { data } = await getBanner();
      // console.log(data);
      this.banners = data.banners;
    },
  },
};
</script>

<style scoped lang='less'>
.el-image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.card {
  margin-top: 10px;
}
.el-card {
  height: 300px;
  margin-bottom: 20px;
  position: relative;
  .content {
    position: absolute;
    bottom: 10px;
  }
}
</style>